import React, { useEffect, useState, useRef } from 'react'
import { useMatches } from 'react-router';
import { useQuery, useMutation } from '@tanstack/react-query'

import OncCol from '@/comp/picker/OneColumn.jsx'
import HourMinuteColumn from '@/comp/picker/HourMinuteColumn.jsx'
import YMDColumn from '@/comp/picker/YMDColumn.jsx'
import LinkageColumn from '@/comp/picker/LinkageColumn.jsx'

import taiji from '@/assets/taiji.png'
import btnbuy from '@/assets/btnbuy.png'


import { apiSubmitPersonInfoPrePay, apiGetInfo, apiGetInfo32 } from '@/utils/apis.js'
import { useNavigate } from 'react-router';
import tips from '@/utils/tips.js'
import BlurBg from '@/comp/BlurBg.jsx'
import wxPay from '@/utils/wxPay.js'
export default function Home() {
  var navi = useNavigate()
  var ggRef = useRef(null)
  let [show, setShow] = useState(false)
  var [ymd, setYmd] = useState('')
  var [hm, setHm] = useState('')
  var [area, setArea] = useState('')

  var childTripleRef = useRef(null)
  var childHMRef = useRef(null)
  var childCityRef = useRef(null)

  var { mutate, isPending } = useMutation({
    mutationFn: apiSubmitPersonInfoPrePay,
    mutationKey: ['personInfo'],
    onSuccess: async (result) => {
      console.log('======result', result);
      if (result.msg == '生辰信息提交成功') {
        var resPay = await wxPay(result.prepay)
        console.log('======resPay', resPay);
        if (resPay.err_msg == "get_brand_wcpay_request:ok") {
          navi('/checkispaysuccess?id=' + result.bazi_id)
        } else {
          tips({ content: '支付取消了' })
        }
      }
    }
  })


  function invokeYMH() {
    if (childTripleRef.current) {
      childTripleRef.current.handleShow()
    }
  }
  function invokeHM() {
    if (childHMRef.current) {
      childHMRef.current.handleShow()
    }
  }
  function onMessageYMD(data) {
    setYmd(data)
    //data形如[2024, 3, 23],代表2024年4月24日,也就是月和日都要加1才是人类认知的日期
  }
  function onMessageHM(data) {
    setHm(data)
    //data形如[0,57],代表0点57分,该值无需转换,已是人类认知的时间
  }
  function onMessageCity(data) {
    setArea(data)
    //data形如['河北省','邯郸市']
  }
  function invokeCity() {
    if (childCityRef.current) {
      childCityRef.current.handleShow()
    }
  }
  function placeAnOrder() {
    if (ymd == '' || hm == '' || area == '') {
      tips({ content: '信息不全' })
      return
    }

    mutate({
      // "name": "张三",
      // "sex": '1',
      "type": 1,
      "year": ymd[0],
      "month": ymd[1] + 1,
      "day": ymd[2] + 1,
      "hours": hm[0],
      "minute": hm[1],
      province: area[0],
      city: area[1]
    })
  }
  useEffect(() => {
    ggRef.current.addEventListener('touchmove', function (event) {
      event.preventDefault();  // 现在可以安全地调用 preventDefault()
    }, { passive: false });
  }, [])
  return (
    <>
      <BlurBg></BlurBg>
      <div className='bgdrop' ref={ggRef}></div>
      <LinkageColumn ref={childCityRef} onMessage={onMessageCity}></LinkageColumn>
      <YMDColumn ref={childTripleRef} onMessage={onMessageYMD}></YMDColumn>
      <HourMinuteColumn ref={childHMRef} onMessage={onMessageHM}></HourMinuteColumn>

      <div style={{ position: 'fixed', zIndex: 4, top: 0, left: 0, right: 0 }}>
        <div className='mt-[10px] rounded border-[#e5dccf] border-1 border-solid bg-[#fefcfb] p-[10px] w-[96%] mx-auto'>
          <div className='flex'>
            <div className='leading-7'>生辰八字,前年智慧结晶,助你精准推算运势起伏!无论是事业,财运,爱情还是健康,格局命理为你量身定制专属运势指南</div>
            <img src={taiji} className="w-[100px]" />
          </div>
          <div className='flex items-center mb-[12px] birth_ymd'>
            <div className='w-[100px] text-[#b69777] '>出生日期</div><div onClick={invokeYMH} className='js-date flex justify-between items-center border border-[#e8e1d5] flex-1 p-[3px_5px] rounded bg-white text-[#d0cfcf]'>
              <div className={ymd == '' ? 'text-[#999]' : 'text-[#333]'}>{ymd == '' ? '请选择' : `${ymd[0]}年${ymd[1] + 1}月${ymd[2] + 1}日`}</div>
              <div className='w-[8px] h-[8px]  border-t border-t-[#d0cfcf] border-r border-r-[#d0cfcf]  rotate-45'></div>
            </div>
          </div>
          <div className='flex items-center mb-[12px] birth_hm'>
            <div className=' w-[100px] text-[#b69777] '>出生时间</div><div onClick={invokeHM} className='js-time flex justify-between items-center border border-[#e8e1d5] flex-1 p-[3px_5px] rounded bg-white text-[#d0cfcf]'>
              <div className={hm == '' ? 'text-[#999]' : 'text-[#333]'}>{hm == '' ? '请选择' : `${hm[0]} : ${hm[1]}`}</div>
              <div className='w-[8px] h-[8px]  border-t border-t-[#d0cfcf] border-r border-r-[#d0cfcf]  rotate-45'></div>
            </div>
          </div>
          <div className='flex items-center mb-[20px]'>
            <div className='w-[100px] text-[#b69777]'>出生地点</div><div onClick={invokeCity} className='flex justify-between items-center border border-[#e8e1d5] flex-1 p-[3px_5px] rounded bg-white text-[#d0cfcf]'>
              <div className={area == '' ? 'text-[#999]' : 'text-[#333]'}>{area == '' ? '请选择' : `${area[0]} - ${area[1]}`}</div>
              <div className='w-[8px] h-[8px]  border-t border-t-[#d0cfcf] border-r border-r-[#d0cfcf]  rotate-45'></div>
            </div>

          </div>
          <div className='text-[#a0a0a0] text-[13px]'>如果只知道农历生日,需要先转换成公历日期(可以使用万年历工具)</div>
          <div className="text-[#a0a0a0] text-[13px]">出生地点是用于校正真太阳时,因为不同地区的经度会影响时辰的划分</div>
        </div>
        <div onClick={placeAnOrder} className={`flex items-center justify-center w-[90%] mx-auto mt-[20px] text-white bg-no-repeat aspect-1061/205 bg-contain text-[20px]`} style={{ backgroundImage: `url(${btnbuy})`, textShadow: '1px 1px 3px rgba(0,0,0,.7)' }}>{isPending ? '支付9.9查看运势' : '支付9.9查看运势'}</div>
      </div>

    </>
  )
}
